<!--
 * @Author: long
 * @Date: 2021-09-01 14:53:22
 * @LastEditTime: 2021-10-19 16:27:27
 * @LastEditors: Please set LastEditors
 * @Description: 应用创建/修改
 * @FilePath: \ant-design-vue-jeecge:\hjimi\人脸辨识云\html\gitlab\pc\faceCloudWebsite\src\views\application-manage\components\Add_edit_application.vue
-->
<style lang="less" scoped>
 .box_style{padding-bottom: 80px;}
.application_add_edit {
    .form {
        position: relative;
        left: -64px;
        // &::v-deep {
        //     input {
        //         border:none;
        //         border-bottom: 1px #8ecafc solid;
        //         border-radius: 0;
        //     }
        //     input:focus {
        //         border:1px#1890FF solid;
        //         box-shadow: none;
        //         border-radius: 4px;
        //     }
        // }
    }
    .che {
        font-size: 16px;
        cursor: pointer;
        display: inline-block;
        margin-left: 14px;
    }
}
.app_lis {
    .tip {color: #939393;margin: 40px 0 30px 0;}
   .cont {
        margin-left: 70px;
   }
   .c_width{width: 82%;
.con_lis {
    max-height: 500px;
    overflow-y: auto;
    padding-left: 30px;
    padding-right: 40px;
    padding-top: 10px;
    h5 {
      font-size: 14px;
      color: #939393;
      padding-bottom: 10px;
    }
    li {
     div  {
        columns: 3;
     }
      margin-bottom: 20px;
      &::v-deep .ant-checkbox-wrapper {
        margin-left: 0!important;
        margin-bottom: 8px!important;
        display:block;
        width: 275px;
    float: left;
      }
    }
    li:last-child {
      margin-bottom: 0;
    }
    ::v-deep.ant-checkbox + span {
      color: #000;
    }
}
   }
}
.check_group {
  width: 100%;
}
.submit_handle {
    width: 100%;
    height: 80px;
    position: fixed;
    bottom: -40px;
    left: 0;
    background: #fff;
    margin: 40px auto;
    border-top:1px #eee solid;
    text-align: center;
    padding-top: 20px;
}
</style>
<template>
  <div class="app_container">
    <div class="box_style application_add_edit">
      <div class="table_tit_txt f_weight">基本信息</div>
       <a-form-model class="form mt30" ref="appForm" :model="appForm" :rules="appRules" :label-col="labelCol">
         <a-form-model-item ref="name" label="应用名称：" prop="name" :wrapper-col="{ span: 3 }">
           <div class="flex">
               <a-input
                 v-model="appForm.name" :maxLength=20 allowClear placeholder="请输入应用名称"
                  @blur="
                    () => {
                      $refs.name.onFieldBlur()
                    }"
                  @keyup="nptNameHandle"
                    />
               <span class="che" @click="submitAppName" v-show="npt1"><a-icon type="check" class="theme_col" /></span>
           </div>
         </a-form-model-item>
          <a-form-model-item label="应用描述：" prop="des" :wrapper-col="{ span: 5 }">
           <div class="flex">
             <a-input
               v-model="appForm.des" :maxLength=20 allowClear placeholder="请输入应用描述"
             />
           <!-- <span class="che"><a-icon type="check" class="theme_col" /></span> -->
           </div>
         </a-form-model-item>
       </a-form-model>

      <div class="app_lis mt50">
          <div class="table_tit_txt f_weight">服务接口</div>
          <div class="cont">
            <a-spin :spinning="spinning" tip="加载中...">
              <p class="tip">开通的服务接口，可通过应用AK/SK调用</p>
               <a-empty v-if="apiItemList.length == 0" />
              <a-checkbox-group v-else class="check_group" v-model="checkApiArr" @change="checkApiHandle">
               <a-collapse class="c_width" v-model="activeKey">
               <a-collapse-panel v-for="(apiItem, index) of apiItemList" :key="apiItem.name" :header="apiItem.name">
                   <ul class="con_lis">
                      <li v-for="(apiItemTit, index1) of apiItem.resourceList" :key="index1">
                        <h5>{{ apiItemTit.name }}</h5>
                        <div>
                          <a-checkbox 
                        v-for="(apiItemChildTit, index2) of apiItemTit.resourceList" 
                        :key="index2" 
                        :value="apiItemChildTit.id"
                        >{{ apiItemChildTit.name }}</a-checkbox>
                        </div>
                      </li>
                   </ul>
               </a-collapse-panel>
             </a-collapse>
                </a-checkbox-group>
            </a-spin>
          </div>
      <div class="submit_handle">
           <a-button type="primary" class="mr10" @click="saveAppHandle('appForm')" :loading="saveLoading">保存</a-button>
           <a-button @click="resetParams" v-show="submitType != ['add'] ? false : true">重置</a-button>
           <a-button @click="backApplist" v-show="submitType == ['add'] ? false : true">取消</a-button>
      </div>
      </div>
    </div>
  </div>
</template>
<script>
import { addApp, editApp, appNav, appDetails, appOpenList } from '@/api/application-manage/application'
import { getApiServeList } from '@/utils/business'
let vm

export default {
 props: {
      submitType: {
       type: Array,
       default() {
           return ['add']
       }
     },
     editParams: {
       type: Object,
       default() {
           return {}
       }
     }
    },
  data() {
    return {
        spinning: true,
        labelCol: { span: 2 },
        wrapperCol: { span: 5 },
    
        npt1: false,
        appForm: {
            name: '',
            des: ''
        },
        appRules: {
            name: [
              {required:true, message: '请输入应用名称', trigger: ['blur', 'change'] },
            ],
        },
        
        activeKey: [],
        checkApiArr: [],
        apiItemList: [],
        saveLoading:false
    }
  },
   watch: {
    $route() {
      let querys = this.$route.query
     if(!querys.id) {
       this.$router.go(-1)
     }
    }
  },
  methods:{
      checkApiHandle(val) {
      },
      nptNameHandle() {
        //   this.form.name = this.form.name.replaceAll(' ','')
        //   this.npt1 = true
      },
      submitAppName() {
        //   this.$refs.name.onFieldBlur()
        //   if(this.form.name) {
        //       this.npt1 = false
        //   }
      },
     getApiList() {
        getApiServeList().then((res) => {
          this.spinning = false
           this.apiItemList = res
           this.activeKey = [], this.activeKey.push(res[0].name)
      })
      },
     saveAppHandle(formName) {
       let { appForm, checkApiArr } = this
         this.$refs[formName].validate((valid, value) => {
            if(valid) {
              if(checkApiArr.length == 0 || !checkApiArr) {
                this.$msg.warning('请勾选服务接口')
            }  else {
              this.saveLoading = true
              this.submitType.includes('add') ? addAppSubmit() : editAppSubmit()
              
             function addAppSubmit() {
               addApp(
                 {
                  name: appForm.name,
                  description: appForm.des,
                  resourceIds: checkApiArr
                 }
               ).then((res) => {
                   if(res.code === 0) {
                       vm.$msg.success(res.msg), vm.saveLoading = false, vm.resetParams()
                       vm.goPrePage()
                   } else {
                       vm.saveLoading = false
                   }
               })
             }

             function editAppSubmit() {
               let params = {
                   id: vm.$route.query.id,
                   name: appForm.name,
                  description: appForm.des,
                  resourceIds: checkApiArr
                 }
               let formData = new FormData()
               for(let item in params) {
                   if(params[item] !== null) formData.append(item, params[item]) 
                    }
               editApp(formData).then((res) => {
                   if(res.code === 0) {
                       vm.$msg.success(res.msg), vm.saveLoading = false
                       vm.goPrePage()
                   } else {
                       vm.saveLoading = false
                   }
               })
             }
            }
            } else {
               if(Object.keys(value)[0] === 'name') {
                   this.$msg.warning((value.name[0].message))
               }
            }
         })
     },
     resetParams() {
       this.$refs.appForm.resetFields()
       this.checkApiArr = []
     },
     backApplist() {
       this.$router.push('applicationList')
     },
     setEidtParams() {
       let { appForm } = this

       if(this.submitType != ['add']) {
            let id = this.$route.query.id
            if(id !== undefined) {
                appDetails(this.$route.query.id).then((res) => {
                    if(res) {
                        if(res.data) {
                          let { data }  = res
                            appForm.name = data.name
                            appForm.des = data.description
                        }
                    }
                })
            }

       }
     },
     setEditApiParams() {
       if(this.submitType != ['add']) {
         let id = this.$route.query.id
            if(id !== undefined) {
              this.checkApiArr = []
                appOpenList(this.$route.query.id).then((res) => {
                    if(res) {
                        if(Array.isArray(res.data)) {
                           this.checkApiArr = res.data
                        }
                    }
                })
            }
       }
     },
     goPrePage() {
       this.$router.push('applicationList')
     }
  },
  beforeCreate() {
    vm = this
  },
  created() {
    this.setEidtParams(), this.setEditApiParams()
    this.getApiList()
  },
  mounted() {
  },
}
</script>